<template>
  <el-container id="main">
    <!-- 骨架面板，数据还未响应时显示 -->
    <template v-if="!showFlag">
        <el-skeleton :rows="8" animated />
    </template>
    <!-- 数据请求回来了，显示 -->
    <template v-else>
      <el-row class="top">
        <el-row>
          <!-- 标题 -->
          <el-col class="title"
            ><h1>{{ blogContentObj.title }}</h1></el-col
          >
          <!-- 计算发布时间 -->
          <el-col v-if="blogContentObj.date">
            <span v-text="getDateYear(blogContentObj.date)"> </span>
            <span>前发布, {{ visitNum }}人读过</span>
          </el-col>
        </el-row>
      </el-row>
      <!-- 文章内容 -->
      <div class="middle" v-html="blogContentObj.mainContent"></div>

      <el-row class="footer">
        <el-col>
          <span @click="toNext">阅读下一篇博文</span>
        </el-col>
      </el-row>
      <!-- 留言按钮 -->
      <template v-if="!drawer">
        <div class="show-drawer">
          <svg @click="checkDrawer" t="1629533624638" class="icon " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2141" width="32" height="32"><path d="M608.256 681.984l-61.44 24.576-8.192-65.536z" fill="#FFCC7C" p-id="2142"></path><path d="M987.136 202.752l-22.528-14.336 14.336-24.576c6.144-10.24 2.048-22.528-8.192-28.672 8.192-12.288 12.288-26.624 12.288-40.96 0-28.672-14.336-55.296-40.96-71.68-18.432-10.24-40.96-14.336-61.44-8.192-20.48 6.144-38.912 18.432-49.152 38.912-4.096-2.048-10.24-4.096-16.384-2.048-4.096 2.048-10.24 4.096-12.288 10.24l-131.072 225.28H40.96c-10.24 0-20.48 10.24-20.48 20.48v534.528c0 12.288 10.24 20.48 20.48 20.48h268.288V962.56c0 8.192 4.096 14.336 10.24 18.432 4.096 2.048 6.144 2.048 10.24 2.048s8.192-2.048 12.288-4.096l174.08-116.736H819.2c10.24 0 20.48-8.192 20.48-20.48V403.456l104.448-180.224 22.528 12.288s2.048 2.048 0 6.144c0 8.192-6.144 28.672-49.152 63.488-38.912 30.72-57.344 57.344-57.344 81.92 0 14.336 4.096 26.624 16.384 36.864 4.096 4.096 8.192 6.144 14.336 6.144 6.144 0 10.24-2.048 14.336-6.144 8.192-8.192 8.192-20.48 0-28.672-4.096-2.048-4.096-4.096-4.096-4.096 0-4.096 4.096-20.48 43.008-51.2 57.344-45.056 65.536-79.872 65.536-102.4-2.048-14.336-10.24-28.672-22.528-34.816zM798.72 821.248H507.904c-4.096 0-8.192 2.048-12.288 4.096l-145.408 100.352v-81.92c0-12.288-10.24-20.48-20.48-20.48H61.44V327.68h585.728l-153.6 266.24c-2.048 2.048-2.048 6.144-2.048 10.24v4.096l12.288 88.064H163.84c-10.24 0-20.48 10.24-20.48 20.48s10.24 20.48 20.48 20.48h346.112c0 6.144 4.096 12.288 10.24 14.336 4.096 2.048 6.144 2.048 10.24 2.048 2.048 0 4.096 0 8.192-2.048l120.832-49.152h2.048c2.048 0 2.048-2.048 4.096-2.048h2.048l2.048-2.048c2.048-2.048 2.048-2.048 2.048-4.096L798.72 475.136v346.112z m-260.096-180.224l69.632 38.912-59.392 24.576-10.24-63.488zM839.68 321.536l-40.96 71.68-151.552 264.192-34.816-20.48-71.68-40.96L694.272 327.68l24.576-40.96 108.544-188.416 71.68 40.96 34.816 20.48-94.208 161.792z m96.256-206.848l-71.68-40.96c6.144-10.24 14.336-16.384 24.576-18.432 4.096 0 6.144-2.048 10.24-2.048 8.192 0 14.336 2.048 20.48 6.144 20.48 10.24 26.624 34.816 16.384 55.296z" fill="#1C2754" p-id="2143"></path><path d="M798.72 475.136v346.112H501.76l-4.096 4.096-145.408 100.352v-81.92c0-12.288-10.24-20.48-20.48-20.48H61.44V327.68h585.728l-153.6 266.24c-2.048 2.048-2.048 6.144-2.048 10.24v4.096l12.288 88.064H163.84c-10.24 0-20.48 10.24-20.48 20.48s10.24 20.48 20.48 20.48h346.112c0 6.144 4.096 12.288 10.24 14.336 4.096 2.048 6.144 2.048 10.24 2.048 2.048 0 4.096 0 8.192-2.048l120.832-49.152h2.048c2.048 0 2.048-2.048 4.096-2.048h2.048l2.048-2.048c2.048-2.048 2.048-2.048 2.048-4.096L798.72 475.136z" fill="#FFCC7C" p-id="2144"></path><path d="M897.67936 139.89888l-84.992 147.21024-23.552 40.79616-178.176 308.61312-70.94272-40.96 154.624-267.81696 23.552-40.79616 108.544-188.0064z" fill="#B2C8FF" p-id="2145"></path><path d="M933.15072 160.37888l-93.184 161.3824-40.96 70.9632-152.576 264.27392-35.47136-20.48 178.176-308.61312 23.552-40.79616 84.992-147.21024z" fill="#B2C8FF" p-id="2146"></path><path d="M935.89504 114.66752l-70.94272-40.96c5.12-8.86784 13.78304-15.68768 24.9856-18.67776 2.78528-0.75776 7.3728-0.49152 10.15808-1.2288 7.3728-0.47104 13.7216 0.8192 20.80768 4.9152 19.49696 11.264 26.25536 36.4544 14.99136 55.95136z" fill="#789EFF" p-id="2147"></path><path d="M606.43328 681.20576l-59.2896 24.8832-8.11008-63.7952z" fill="#C1CDEB" p-id="2148"></path><path d="M490.94656 602.70592s-1.024 1.76128 0.75776 2.78528l0.73728 2.80576-1.49504-5.59104z" fill="#1C2754" p-id="2149"></path><path d="M163.84 450.56h225.28c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48H163.84c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48z" fill="#1C2754" p-id="2150"></path><path d="M163.84 573.44h225.28c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-20.48 20.48H163.84c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48z" fill="#1C2754" p-id="2151"></path></svg>
          <span class="show-drawer-num">{{blogCommentNum}}</span>
        </div>
      </template>

      <!-- 展开留言抽屉 -->
      <el-drawer v-model="drawer" :with-header="false">
        <p class="el-icon-close" @click="drawer= false" style="text-algin:right;"></p>
        <el-container>
          <!-- 增加留言板 -->
          <el-aside width="45%">
            <el-form
              :model="usercomment"
              status-icon
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <h3>你也来说两句呗</h3>
              <el-form-item prop="content">
                <textarea
                  v-model="usercomment.content"
                  :placeholder="usercomment.placeholderText"
                ></textarea>
              </el-form-item>
              <h3>留个联系方式吧</h3>
              <el-form-item prop="name">
                <el-input
                  placeholder="输入称呼"
                  type="text"
                  v-model="usercomment.name"
                ></el-input>
              </el-form-item>
              <el-form-item prop="email">
                <el-input
                  placeholder="输入邮箱"
                  v-model="usercomment.email"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >保存评论</el-button
                >
              </el-form-item>
            </el-form>
          </el-aside>
          <!-- 已有留言列表 -->
          <el-main v-if="blogComment.length > 0 && blogCommentNum != 0">
            <el-row class="message-item" v-for="(item, index) in blogComment" :key="index">
              <el-card class="box-card" shadow="hover">
                <!-- 评论者信息 -->
                <el-row>
                  <el-col :xs="8" :sm="4" :md="4" >
                    <div class="profile">
                      <img src="../assets/profile.png" alt="" />
                    </div>
                  </el-col>
                  <el-col :xs="14" :sm="14" :md="8" class="name-box">
                    <p class="name-text">{{item.name}}</p>
                    <p><span v-text="getDateYear(item.date)"></span>在说:</p>
                  </el-col>
                </el-row>
                <!-- 评论内容 -->
                <el-row class="comment-text">
                  <el-col>{{item.content}}</el-col>
                </el-row>
                <!-- 评论点赞/反对/回复 -->
                <el-row class="leave-message-footer" type="flex" justify="center">
                  <el-col :span="8">
                    <span @click="agreeFn(item.id)" class="el-icon-success">赞同({{item.agree}})</span>
                  </el-col>
                  <el-col :span="8">
                    <span @click="opposeFn(item.id)" class="el-icon-error">反对({{item.oppose}})</span>
                  </el-col>
                  <el-col :span="8">
                    <span v-if="!replyLoad" @click="replyFn(item)" class="el-icon-chat-round">回复</span>
                    <span v-else @click="replyFn(item)"><img src="../assets/reply-load.gif" style="width:10px" alt="加载">回复</span>
                  </el-col>
                </el-row>

                <!-- 展示当前评论的回复内容 -->
                <template v-if="replyComment && (item.id == showReply)">
                  <div class="no-reply" v-if="replyComment && replyComment.length == 0">暂无回复内容</div>
                  <div v-else-if="replyComment">
                    <el-row  v-for="(replyItem,index) in replyComment" :key="index" class="reply-con">
                      <el-col class="reply-item">
                        <div>
                          <el-row class="reply-header">
                            <img src="../assets/profile.png" class="reply-profile-img" alt="">
                            <span class="reply-name">{{replyItem.name}}</span>
                            <span class="reply-date">
                              在
                              <span v-text="getDateYear(replyItem.date)"></span>
                              前回复{{replyItem.byReplyName}}:
                            </span>
                          </el-row>
                          <el-row class="reply-content">{{item.content}}</el-row>
                        </div>
                        <el-row class="reply-item-icon">
                            <div  @click="agreeFn(replyItem.id)" style="cursor: pointer;">
                              <svg t="1632024375636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3652" width="16" height="16"><path d="M537.6 154.688l-13.632-0.256a96 96 0 0 0-94.72 72.704l-39.552 158.208a32 32 0 0 1-31.04 24.256H281.6a96 96 0 0 0-96 96v256a96 96 0 0 0 96 96h457.856a96 96 0 0 0 94.656-80.128l42.624-254.144a96 96 0 0 0 1.28-15.488l-0.384-9.28a96 96 0 0 0-95.232-87.104l-135.872-0.64a32 32 0 0 1-31.68-35.2l12.48-125.312 0.128-2.816A91.328 91.328 0 0 0 537.6 154.688z m-14.72 63.744l13.696 0.256c13.44 0.192 24.384 10.048 26.496 22.848l0.32 6.016-15.744 156.8a64 64 0 0 0 63.424 70.4l171.072 0.704a32 32 0 0 1 31.424 37.312l-42.56 254.08a32 32 0 0 1-31.552 26.752H281.6a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32h77.056a96 96 0 0 0 93.12-72.704l39.552-158.208a32 32 0 0 1 31.552-24.256z" fill="#FF7960" p-id="3653"></path></svg>
                              <span style="color:#FF7960;" v-if="replyItem.agree>0">{{replyItem.agree}}</span>
                            </div>
                            <div @click="replyFn(replyItem,'nextReply')" style="text-align:center;cursor: pointer;"><span  class="el-icon-chat-round"></span></div>
                        </el-row>
                      </el-col>
                    </el-row>
                  </div>
                </template>
              </el-card>
            </el-row>
          </el-main>
          <el-main v-else >
              <p>暂无留言数据</p>
          </el-main>
        </el-container>
      </el-drawer>

    </template>

  </el-container>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, defineComponent, computed } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { ElMessage } from "element-plus";
import { getBlogById, getCurrentBlogNext, addPostCommentsByBlog, getCommentByBlog, getReplyComment, getAddAgree, getAddOppose, addReplyComment } from "../api/index";
import useGetMonth from "../hooks/userGetMonth";

export default defineComponent({
  name: "ArticleDetail",
  props: {
    // 白天/黑夜模式的变量，用于下面less
    bgColor: String,
  },
  setup() {
    const router = useRouter();

    // 骨架屏标识,默认false为显示
    let showFlag = ref(false)
    // 抽屉开关
    let drawer = ref(false)

    // 博客id
    const blogId = ref(useRoute().params.id);
    // 博客对象
    let blogContentObj = ref(null);
    // 博客内容的留言数组
    let blogComment = ref([])
    // 留言数组总长度
    let blogCommentNum = ref(0)

    // 文章阅读数
    let visitNum = ref(0);

    // 博客评论
    let usercomment = ref({
      placeholderText:'评论内容',
      replyId:undefined,
      content: "",
      name: "",
      email: "",
    });

    // 回复评论的内容
    let replyComment = ref(null)
    // 标识当前评论是否显示回复内容,默认不显示,当当前评论id和showReply的值相等时显示
    let showReply = ref(-1)
    // 是否在加载回复的数据,默认不是
    let replyLoad = ref(false)

    // 显示留言板抽屉
    function checkDrawer(){
      drawer.value = true
      // getBlogComment(blogId.value)
    }

    // 获取该文章的所有内容
    async function getBlogContent(blogId) {
      let result = await getBlogById(blogId);
      if (result.code === 200) {
        showFlag.value = true
        blogContentObj.value = result.data;
        return;
      }
      ElMessage.error(result.message);
    }

    // 获取该文章的所有留言信息
    async function getBlogComment(blogId) {
      let {code, data, message} = await getCommentByBlog(blogId)
      if(code === 200 && message === '成功'){
        blogComment.value = data
        blogCommentNum.value = data.length
        return
      }
      ElMessage.error(message)
    }

    //计算距离发布的时间差
    const getDateYear = computed(() => {
      return function (dataStr) {
        return useGetMonth(dataStr);
      };
    });

    // 获取下一篇博客
    async function toNext() {
      let { code, data, message } = await getCurrentBlogNext(blogId.value);
      if (code === 200 && message === "成功") {
        router.push(`/articleDetail/${data}`);
        showFlag.value = false
        // blogContentObj.value = ref(null);
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth'
        });
        return;
      }
      ElMessage.error(message);
    }

    // 点赞接口
    async function agreeFn(id) {
      let { code, data, message } = await getAddAgree(id);
      console.log(code, data, message, "点赞接口");
      if (code === 200 && data === 1) {
        getBlogComment(blogId.value)
        ElMessage.success(message);
        return;
      }
      ElMessage.error(message);
    }

    // 反对接口
    async function opposeFn(id) {
      let { code, data, message } = await getAddOppose(id);
      if (code === 200 && data === 1) {
        getBlogComment(blogId.value)
        ElMessage.success(message);
        return;
      }
      ElMessage.error(message);
    }

    // 点击回复
    async function replyFn(commentData,flag = undefined){
      console.log(commentData,'cc')
      // 保存当前点击的评论信息
      usercomment.value.placeholderText = `回复@${commentData.name}`

      // 优化，当前已经回复的数据已经请求过了
      if(usercomment.value.replyId == commentData.id && replyComment) return

      usercomment.value.replyId = commentData.id
      // 留言的回复操作
      if(!flag){
        // 显示加载图，数据请求中
        replyLoad.value = true
        let {code, data, message} = await getReplyComment(commentData.id)
        if(code == 200 && message == '成功'){
          // 隐藏加载图，数据请求回来了
          replyLoad.value = false
          replyComment.value = data
          showReply.value = commentData.id
          // data.length > 0 ? showReply.value = data[0].replyId : showReply.value = commentData.id
          return
        } 
        ElMessage.error(message)
      }
    }

    onMounted(() => {
      getBlogContent(blogId.value);
      getBlogComment(blogId.value)
      // 用于获取访问数
      ViLike.get(blogId.value, (visit, like, islike) => {
        // 参数依次是 访问量、点赞数、点赞状态
        visitNum.value = visit;
      });
    });

    // 组件卸载前
    onBeforeUnmount(() =>{
      // 问题: 没有关闭留言抽屉板，直接点击左侧打开新的其他页面,会导致右侧不能滚动
      // 原因: Ui组件的抽屉会在body身上加一个类和右内边距,将这两个清除即可恢复滚动
      if(drawer.value){
        let bodyNode = document.querySelector('body')
        bodyNode.className = ''
        bodyNode.style.padding = 'unset'
      }
    }) 

    // 监听路由改变
    onBeforeRouteUpdate((to) => {
      blogId.value = to.params.id;
      getBlogContent(to.params.id);
    });

    return {
      showFlag,
      drawer,
      visitNum,
      blogContentObj,
      blogComment,
      blogCommentNum,
      usercomment,
      replyComment,
      showReply,
      replyLoad,
      getDateYear,
      agreeFn,
      opposeFn,
      replyFn,
      checkDrawer,
      toNext,
      // 表单校验规则
      rules: {
        content: [
          { required: true, message: "请输入评论内容", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入称呼", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        let id = this.$route.params.id
        let {content, name, email, replyId } = this.usercomment
        let result 
        if (valid && this.usercomment.placeholderText == '评论内容') {
          result = await addPostCommentsByBlog(id, name, content, email)
        }else if(valid && this.usercomment.placeholderText != '评论内容'){
          result = await addReplyComment(id, name, content, email, replyId)
        }

        if(result.code == 200 && result.message == '成功') ElMessage.success('留言成功,等待管理员审核')
        else ElMessage.error(result.message)
        this.usercomment = {
          placeholderText:'评论内容',
          replyId:undefined,
          content: "",
          name: "",
          email: "",
        }
      });
    },


  },
});
</script>

<style lang="less" scoped>
// 接收js中通过props传递白天/黑夜模式的变量
@afterColor: v-bind(bgColor);
#main {
  display: flex;
  flex-direction: column;
  padding: 4%;
  padding-bottom: 0;
  min-height: 100vh;
  transition: all 4s ease 0s;
  color: rgb(150 148 148 / 90%);
  // 纯css实现顶部进度条显示是否阅读文章到底
  z-index: 10;
  background-image: linear-gradient(to right top, #1a92f2 50%, #eee 50%);
  background-size: 100% calc(100% - 100vh + 2px);
  background-repeat: no-repeat;
  .top {
    .title > h1 {
      margin-top: 30px;
      color: #696767d1;
      font-size: 38px;
      font-weight: bold;
      line-height: 1.5;
    }
    span {
      margin-bottom: 10px;
      display: inline-block;
      color: #888;
      font-size: 13px;
    }
  }
  .middle {
    color: rgb(150 148 148 / 90%);
    ::v-deep img {
      display: inline-block !important;
      max-width: 100%;
    }
    ::v-deep ol,
    ::v-deep ul {
      padding-left: 20px;
      > li {
        margin: 10px 0;
      }
    }
    ::v-deep p {
      margin: 10px 0;
    }
  }
  .footer {
    margin-top: 20px;
    bottom: 0;
    text-align: center;
    span {
      display: inline-block;
      cursor: pointer;
      border-radius: 20px 20px 0 0;
      padding: 20px;
      background-color: #ecf5ff29;
      color: #90a2ba;
    }
  }
}
// 抽屉
.el-drawer {
  height: 100vh;
  .el-main {
    padding: 5px;
    border-left: 1px solid #eee;
    height: 100vh;
    overflow-y: scroll;
    > p {
      margin-top: 40vh;
      margin-left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      color: #d9d9dc;
      text-align: center;
    }
    .message-item {
      margin-bottom: 8px;
      .box-card {
        width: 100%;
        .profile {
          width: 40px;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .name-box {
          display: flex;
          flex-flow: column;
          justify-content: center;
          .el-input {
            border: none;
          }
          .name-text {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.8);
          }
          p {
            font-size: 12px;
            color: #888;
          }
        }

        .comment-text {
          margin: 20px 0px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.6);
        }

        .leave-message-footer {
          text-align: center;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          .el-col{
            cursor: pointer;
          }
        }
        .reply-con{
          font-size: 12px;
          .reply-item{
            display: flex;
            border-left: 3px solid #999;
            padding-left: 8px;
            margin: 8px 0;
            justify-content: space-between;
            width: 80%;
            .reply-profile-img{
              width: 20px;
              height: 20px;
              border-radius: 50%;
            }
            .reply-name{
              display: inline-block;
              margin: 0 8px;
            }
          }
          .reply-item-icon{
            display: flex;
            flex-direction: column;
            // font-size: 12px;
          }
        }
        .no-reply{
          font-size: 12px;
          margin: 8px 0;
          padding-left: 4px;
          border-left: 3px solid #999;
        }
      }
    }
  }
  // 留言表单
  .el-form {
    padding: 5px;
    ::v-deep h3 {
      padding: 10px 5px;
      padding-top: 0px;
    }
    ::v-deep .el-form-item {
      textarea {
        margin: 8px 0px;
        margin-bottom: 0;
        padding: 5px;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
      }
      .el-button {
        width: 100%;
      }
    }
  }
}
.el-drawer__body{
  position: relative;
  &>p{
    position: absolute;
    right: 5px;
    width: 10px;
    height: 10px;
    z-index:99;
  }
}

@media screen and (min-width: 950px) {
  #main::after {
  content: "";
  position: fixed;
  top: 2px;
  left: 0;
  bottom: 0;
  right: 0;
  background: @afterColor;
  z-index: -1;
}
}

// 查看留言样式
.show-drawer{
  position: fixed;
  right: 5px;
  z-index: 0;
  cursor: pointer;
  .show-drawer-num {
    position: relative;
      top: -27px;
      background: red;
      padding: 2px 4px;
      border-radius: 10px;
      color: white;
      font-size: 12px;
  }
}
</style>


